<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addDromForm" ref="addApprovalCarRecordRef" :rules="addDromrules">
            <el-form-item label="宿舍楼名" :label-width="formLabelWidth" prop="buildingName">
                <!-- <el-select v-model="addDromForm.buildingName" clearable placeholder="请选择宿舍" style="width: 100%">
                    <el-option v-for="(item, index) in buildingName" :key="index" :label="item" :value="item" />
                </el-select> -->
                <el-input v-model="addDromForm.buildingName" autocomplete="off" placeholder="请选择宿舍"></el-input>
            </el-form-item>
            <el-form-item label="人员姓名" :label-width="formLabelWidth" prop="teacherName" v-if="title == '修改信息'">
                <el-select v-model="addDromForm.teacherNumber" filterable placeholder="请选择人员" style="width: 100%"
                    :filter-method="getTeacherList">
                    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.teacherNumber" />
                </el-select>
            </el-form-item>
            <el-form-item label="权重" :label-width="formLabelWidth" prop="name">
                <el-input v-model="addDromForm.sortNum" autocomplete="off" placeholder="请填写权重"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth" prop="name">
                <el-input v-model="addDromForm.buildingDetail" autocomplete="off" placeholder="请填写描述"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddApprovalCarRecord",
    components: { ElForm, ElMessage },
    data() {
        return {
            // buildingName: ['1号男生宿舍', '1号女生宿舍', '2号宿舍', '3号宿舍'],
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            list: [],
            selectTeacher: [],
            serachTeacher: [],
            addDromForm: {
                id: '',
                buildingName: '',
                teacherNumber: '',
                teacherName: '',
                sortNum: '',
                buildingDetail: '',
            },
            // 校验规则
            addDromrules: {
                buildingName: vxRule(true, null, "blur"),
                teacherNumber: vxRule(true, null, "blur"),
                teacherName: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getDromById(id) {
            httpService("/javaApi/baseRoomBuilding/queryById", { id: id }, "get").then(
                (data) => {
                    this.addDromForm = data;
                }
            );
        },
        getTeacherList(value) {
            let teacher = ''
            value == undefined ? teacher = '' : teacher = value
            httpService("/javaApi/baseTeacher/list/0/10000", { "name": teacher }, "get").then(
                (data) => {
                    this.list = data.list;
                }
            );
        },
        // getRoomBuildingList() {
        //     httpService("/javaApi/baseRoomBuildingNo/list/1/100", {}, "get").then(
        //         (data) => {
        //             console.log(data);
        //         }
        //     );
        // },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addDromForm.buildingName = "";
            this.addDromForm.teacherNumber = "";
            this.addDromForm.teacherName = "";
            this.addDromForm.sortNum = "";
            this.addDromForm.buildingDetail = "";
            this.selectTeacher = ''
        },
        save() {
            // this.addDromForm.teacherName = this.list.filter(item => item.teacherNumber == this.addDromForm.teacherNumber)[0].name
            this.$refs.addApprovalCarRecordRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("buildingName", this.addDromForm.buildingName);
                    params.append("teacherNumber", this.addDromForm.teacherNumber);
                    params.append("teacherName", this.addDromForm.teacherName);
                    params.append("sortNum", this.addDromForm.sortNum);
                    params.append("buildingDetail", this.addDromForm.buildingDetail);
                    if (this.title == '修改信息') {
                        params.append("id", this.addDromForm.id);
                        httpService("/javaApi/baseRoomBuilding/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success('修改成功');
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getDormList();
                                } else {
                                    ElMessage.error('修改失败');
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/baseRoomBuilding/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success('添加成功');
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getDormList();
                                } else {
                                    ElMessage.error('添加失败');
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>

<style>
.custom-header {
    .el-checkbox {
        display: flex;
        height: unset;
    }
}
</style>